<template>
  <div class="account">
    <div class="header-view">
      <el-button type="primary" size="mini" @click="adduserLevel">新 增</el-button>
    </div>
    <el-table v-loading="loadingUser" :data="userLevelList">
      <el-table-column label="用户等级" align="center" prop="level" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="等级名" align="center" prop="name" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="邀请直属人数" align="center" prop="upgradeConditionNum" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="要求非直属人数" align="center" prop="inviteNonDirect" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="充值金额" align="center" prop="rechargeAmount" min-width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{$yun.priceFormatter(scope.row.rechargeAmount)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="邀请人数有效充值金额" align="center" prop="effectiveRechargeAmount" min-width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{$yun.priceFormatter(scope.row.effectiveRechargeAmount)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                       width="200">
        <template slot-scope="scope">
          <div>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="updateEscalation(scope.row)"
                       v-hasPermi="['car:level:edit']">修改</el-button>
            <el-button v-if="scope.row.id == maxUserLevel" size="mini" type="text" icon="el-icon-delete"
                       @click="deleteEscalation(scope.row)" v-hasPermi="['car:level:remove']">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加或修改用户等级对话框 -->
    <el-dialog :title="titleUser" :visible.sync="openUser" width="500px" append-to-body>
      <el-form ref="userForm" :model="userForm" :rules="userRules" label-width="180px" label-position="left">
        <el-form-item label="用户等级" prop="level" :rules="[{ required: true, message: '用户等级不能为空', trigger: 'blur' }]">
          <el-input class="modal-input-mini" v-model="userForm.level" placeholder="请输入用户等级" />
        </el-form-item>
        <el-form-item label="等级名" prop="name" :rules="[{ required: true, message: '等级名不能为空', trigger: 'blur' }]">
          <el-input class="modal-input-mini" v-model="userForm.name" placeholder="请输入等级名" />
        </el-form-item>
        <el-form-item label="邀请直属人数" prop="upgradeConditionNum" :rules="[{ required: true, message: '邀请直属人数不能为空', trigger: 'blur' }]">
          <el-input class="modal-input-mini" v-model="userForm.upgradeConditionNum" placeholder="请输入邀请直属人数" />
        </el-form-item>
        <el-form-item label="要求非直属人数" prop="inviteNonDirect" :rules="[{ required: true, message: '要求非直属人数不能为空', trigger: 'blur' }]">
          <el-input class="modal-input-mini" v-model="userForm.inviteNonDirect" placeholder="请输入要求非直属人数" />
        </el-form-item>
        <el-form-item label="充值金额" prop="rechargeAmount" :rules="[{ required: true, message: '充值金额不能为空', trigger: 'blur' }]">
          <el-input class="modal-input-mini" v-model="userForm.rechargeAmount" placeholder="请输入充值金额" />
        </el-form-item>
        <el-form-item label="邀请人数有效充值金额" prop="effectiveRechargeAmount" :rules="[{ required: true, message: '邀请人数有效充值金额不能为空', trigger: 'blur' }]">
          <el-input class="modal-input-mini" v-model="userForm.effectiveRechargeAmount" placeholder="请输入邀请人数有效充值金额" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUserLevelForm">确 定</el-button>
        <el-button @click="cancelUserLevel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userLevelList, userLevelUpdate, deleteUserLevel,saveUpgradationEdit,saveUpgradationAdd } from "@/api/setting/gradeRebate";
import Template from "@/views/setting/template/index.vue";
export default {
  components: {Template},
  data() {
    return {
      // 遮罩层
      loading: true,
      userShareForm: {},
      userShareOpen: false,
      userShareEditTitle: "",
      //商铺等级列表
      storeLevelList: [],
      openStore: false,
      titleStore: '',
      //用户
      loadingUser: false,
      userLevelList: [],
      titleUser: '',
      openUser: false,
      userForm: {},
      userRules: {
        name: { required: true, message: '请输入用户等级名称', trigger: 'blur' },
        level: { required: true, message: '请输入用户等级', trigger: 'blur' },
        upgradeConditionNum: { required: true, message: '请输入用户升级条件', trigger: 'blur' },
        completeOnlineFinancialNum: { required: true, message: '请输入每周完成线下理财数量', trigger: 'blur' },
        keepAmount: { required: true, message: '请输入保证金', trigger: 'blur' },
        // parentLevel: { required: true, message: '请选择父级Id', trigger: 'blur' },
        icon: { required: true, message: '请上传用户等级图标', trigger: 'blur' },
      },
      maxUserLevel: 0
    };
  },
  created() {
    this.getUserLevelList();
  },
  methods: {
    //获取用户等级列表
    getUserLevelList() {
      this.loadingUser = true;
      userLevelList(this.queryParams).then(response => {
        this.userLevelList = response.data;
        this.maxUserLevel = Math.max(...this.userLevelList.map(i => i.id))
        this.loadingUser = false;
      });
    },
    // 取消按钮
    cancelUserLevel() {
      this.openUser = false;
      this.$refs['userForm'].clearValidate();
    },
    // 表单重置
    resetUserLevel() {
      this.userForm = {
        id: null,
        name: null,
        icon: null,
        upgradeConditionNum: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        upShortVideoFlag: null,
        openShopFlag: null,
        onlineFinancialFlag: null,
        offlineFinancialFlag: null,
        completeOnlineFinancialNum: null,
        keepAmount: null,
        level: null,
        nextLevel: null
      };
      this.resetForm("resetUserLevel");
    },/** 新增按钮操作 */
    adduserLevel() {
      this.resetUserLevel();
      this.openUser = true;
      this.titleUser = "添加用户等级";
    },
    /** 修改按钮操作 */
    updateEscalation(row) {
      this.resetUserLevel();
      const id = row.id || this.ids
      let currentData = row;
      this.userForm = currentData;
      this.openUser = true;
      this.titleUser = "修改用户等级";
    },
    /** 删除按钮操作 */
    deleteEscalation(row) {
      this.$modal
        .confirm("确认删除" + row.name + "的数据项？")
        .then(function () {
          return deleteUserLevel(row.id);
        })
        .then(() => {
          this.getUserLevelList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    /** 提交按钮 */
    submitUserLevelForm() {
      this.$refs["userForm"].validate(valid => {
        if (valid) {
          if (this.userForm.id != null) {
            saveUpgradationEdit(this.userForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openUser = false;
              this.getUserLevelList();
            });
          } else {
            saveUpgradationAdd(this.userForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openUser = false;
              this.getUserLevelList();
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.account {
  padding: 10px;
}

.header-view {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 44px;

}

.group-title {
  font-size: 18px;
  font-weight: 700;
  color: #333333;
}

.el-table {
  width: auto !important;
}

.table-title {
  height: 44px;
  line-height: 44px;
}
</style>
